<template>
  <div class="homeContainer">
    <div v-if="$route.path == '/home'">
      <!-- 搜索区块 -->
      <van-search
        v-model="searchVal"
        shape="round"
        background="#fff"
        disabled
        placeholder="请输入搜索关键词"
        @click="goSearch"
        style="position:fixed;z-index:999;top:0;width:100%"
      />
      <!-- 首页轮播 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#f60" style="padding-top:0.54rem">
        <van-swipe-item v-for="item in banner" :key="item.id" @click="toDetail(item)">
          <img
            :src="item.image_url"
            alt=""
            width="100%"
            style="display: block"
          />
        </van-swipe-item>
      </van-swipe>
      <!-- 宫格 -->
      <van-grid :column-num="5">
        <van-grid-item
          v-for="item in channel"
          :key="item.id"
          :icon="item.icon_url"
          :text="item.name"
          @click="onProds"
        />
      </van-grid>
      <!-- 品牌 -->
      <div class="brand">
        <div class="title">品牌制造商直供</div>
        <ul class="brand-list">
          <li v-for="item in brandList" :key="item.id" @click="toDetail(item)">
            <img :src="item.pic_url" alt="" />
            <h4>{{ item.name }}</h4>
            <div>{{ item.floor_price | priceFormat }}</div>
          </li>
        </ul>
      </div>
      <!-- 新品首发 -->
      <div class="brand">
        <div class="title">周一周四~新品首发</div>
        <ul class="brand-list">
          <li v-for="item in newGoodsList" :key="item.id" @click="toDetail(item)">
            <img :src="item.list_pic_url" alt="" />
            <h4>{{ item.name }}</h4>
            <div>{{ item.retail_price | priceFormat }}</div>
          </li>
        </ul>
      </div>
      <!-- 专题 -->
      <div class="topic">
        <div class="title">专题精选</div>
        <van-swipe class="my-swipe" :autoplay="3000" :show-indicators="false">
          <van-swipe-item v-for="item in topicList" :key="item.id" @click="toDetail(item)">
            <img :src="item.scene_pic_url" alt="" />
            <div class="desc">
              <p>{{ item.title }}</p>
              <p>{{ item.subtitle }}</p>
            </div>
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
    <div class="brand">
      <div class="title">热门商品</div>
      <ul class="brand-list">
        <li v-for="item in hotGoodsList" :key="item.id" @click="toDetail(item)">
          <img :src="item.list_pic_url" alt="" />
          <h4>{{ item.name }}</h4>
          <div>{{ item.retail_price | priceFormat }}</div>
        </li>
      </ul>
    </div>
    <!-- 搜索视图 -->
    <transition name="van-slide-right">
      <router-view v-if="$route.path == '/home/popup'" />
    </transition>
  </div>
</template>
<script>
import { GetHomeData } from "@/request/api";
import { priceFormat } from "@/Filter/filter";
export default {
  data() {
    return {
      searchVal: "", //搜索关键字
      banner: [], //轮播图数据
      channel: [], //图标
      brandList: [], //品牌列表
      topicList: [], //专题精选
      newGoodsList: [], //新品首发
      hotGoodsList:[],//热门商品
    };
  },
  created() {
    GetHomeData().then((res) => {
      console.log(res.data);
      let { banner, channel, brandList, topicList,newGoodsList, hotGoodsList } = res.data;
      this.banner = banner;
      this.channel = channel;
      this.brandList = brandList;
      this.topicList = topicList;
      this.newGoodsList = newGoodsList;
      this.hotGoodsList = hotGoodsList;
    });
  },
  methods: {
    goSearch() {
      this.$router.push("home/popup");
    },
    onProds() {
      this.$toast("该功能暂未开放");
    },
    toDetail(item){
      this.$router.push('/detal?id='+item.id)
    }
  },
};
</script>
<style lang="less" scoped>

.title {
  height: 0.4rem;
  line-height: 0.4rem;
  font-weight: 600;
  background: #fff;
  text-align: center;
}
.brand {
  margin-top: 0.1rem;
  background: #fff;
  .brand-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    li {
      margin-bottom: 0.1rem;
      width: 49%;
      position: relative;
      box-sizing: border-box;
      h4 {
        top: 0;
        height: 0.3rem;
        line-height: 0.3rem;
        position: absolute;
        margin-left: 0.1rem;
      }
      div {
        margin-left: 0.1rem;
        top: 0.3rem;
        position: absolute;
      }
      img {
        display: block;
        width: 100%;
        filter: brightness(1.05);
      }
    }
  }
}
.topic {
  margin-top: 0.1rem;
  .van-swipe {
    height: 2.08rem;
    .van-swipe-item {
      position: relative;
      .desc {
        width: 100%;
        height: 20%;
        background-color: rgba(0, 0, 0, 0.5);
        position: absolute;
        bottom: 0;
        left: 0;
        color: #fff;
        p {
          line-height: 0.2rem;
          margin-left: 0.1rem;
        }
      }
      img {
        width: 100%;
        display: block;
        height: 100%;
      }
    }
  }
}
/* .slide-enter,.slide-leave-to{
  right: -100%;
}
.slide-enter-active,.slide-leave-active {
  transition:right .3s ease-out;
}
.slide-enter-to,.slide-leave{
  right: 0;
} */
</style>
